<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside class="home-aside" width="250px">
      <!-- logo -->
      <div class="home-logo-div">
        <router-link to="/owner/home">
          <el-image class="home-logo" src="../src/assets/logo_trans.png" fit="contain"></el-image></router-link>
      </div>
      <!-- 折叠icon -->
      <el-icon class="toggle-button" v-model="isCollapse" @click="toggleCollapse" size="20px">
        <Fold v-if="!isCollapse" />
        <Expand v-if="isCollapse" />
      </el-icon>
      <!-- 侧边栏菜单 -->
      <el-menu class="home-menu-vertical" :collapse="isCollapse" :default-active="$route.path" router>
        <el-menu-item index="/owner/food">
          <el-icon>
            <Edit />
          </el-icon>
          <span slot="title">菜品管理</span>
        </el-menu-item>
        <el-menu-item index="/owner/order">
          <el-icon>
            <Bell />
          </el-icon>
          <span slot="title">订单管理</span>
        </el-menu-item>

        <el-menu-item index="/owner/account">
          <el-icon>
            <User />
          </el-icon>
          <span slot="title">我的账号</span>
        </el-menu-item>
      </el-menu>
      <el-image src="../src/assets/plate.png" class="plate-div"></el-image>
    </el-aside>

    <el-container>
      <el-header class="home-header" height="75px">
        <el-avatar class="user-avatar" :src="avatarSrc" fit="cover" :size="60" />
        <div class="greeting">
          <span>亲爱的商家 {{ username }} ， </span><br />
          <span> 欢迎使用智能点餐系统 ！</span>
        </div>
        <div class="home-info">
          <div class="date">
            <p>当前时间：</p>
            <p class="time-unit-year">{{ date.year }}</p>
            <p class="separator">年</p>
            <p class="time-unit">{{ date.month }}</p>
            <p class="separator">月</p>
            <p class="time-unit">{{ date.day }}</p>
            <p class="separator">日</p>
            <p class="time-unit">{{ date.hour }}</p>
            <p class="separator">时</p>
            <p class="time-unit">{{ date.minute }}</p>
            <p class="separator">分</p>
            <p class="time-unit">{{ date.second }}</p>
            <p class="separator">秒</p>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-row :gutter="16">
          <el-col :span="8">
            <div class="statistic-card" @click="gotoOrder">
              <el-statistic :value="orderNumDay">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    今日订单
                    <el-tooltip effect="dark" content="Number of orders in one day" placement="top">
                      <el-icon style="margin-left: 4px" :size="20">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>相比昨日</span>
                  <span class="green" v-if="orderNumDayRate > 0">
                    {{ orderNumDayRate }} %&nbsp
                    <el-icon>
                      <CaretTop />
                    </el-icon>
                  </span>
                  <span class="yellow" v-if="orderNumDayRate === 0">
                    {{ orderNumDayRate }} %&nbsp
                    <el-icon>
                      <SemiSelect />
                    </el-icon>
                  </span>
                  <span class="red" v-if="orderNumDayRate < 0">
                    {{ orderNumDayRate }} %&nbsp
                    <el-icon>
                      <CaretBottom />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="statistic-card">
              <el-statistic :value="orderNumMonth">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    本月订单
                    <el-tooltip effect="dark" content="Number of orders in one month" placement="top">
                      <el-icon style="margin-left: 4px" :size="20">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>相比上个月</span>
                  <span class="green" v-if="orderNumMonthRate > 0">
                    {{ orderNumMonthRate }} %&nbsp
                    <el-icon>
                      <CaretTop />
                    </el-icon>
                  </span>
                  <span class="yellow" v-if="orderNumMonthRate === 0">
                    {{ orderNumMonthRate }} %&nbsp
                    <el-icon>
                      <SemiSelect />
                    </el-icon>
                  </span>
                  <span class="red" v-if="orderNumMonthRate < 0">
                    {{ orderNumMonthRate }} %&nbsp
                    <el-icon>
                      <CaretBottom />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="statistic-card">
              <el-statistic :value="turnover" title="New transactions today">
                <template #title>
                  <div style="display: inline-flex; align-items: center">今日营业额</div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>相比昨天</span>

                  <span class="green" v-if="turnoverRate > 0">
                    {{ turnoverRate }} %&nbsp
                    <el-icon>
                      <CaretTop />
                    </el-icon>
                  </span>
                  <span class="yellow" v-if="turnoverRate === 0">
                    {{ turnoverRate }} %&nbsp
                    <el-icon>
                      <SemiSelect />
                    </el-icon>
                  </span>
                  <span class="red" v-if="turnoverRate < 0">
                    {{ turnoverRate }} %&nbsp
                    <el-icon>
                      <CaretBottom />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-divider style="margin: 5px" />
        <!-- 进行中的订单 -->
        <el-col :span="24">
          <el-card class="home-order-card" :body-style="{ padding: '8px' }">
            <!-- 卡片标题 -->
            <div class="rank-head">
              <div class="rank-title">
                <span>进行中的订单</span>
                <el-button text class="rank-button" @click="gotoOrder"><el-icon>
                    <ArrowRightBold />
                  </el-icon></el-button>
              </div>
            </div>
            <div v-if="orderNotAccepted.length === 0 && orderAccepted.length === 0">
              <el-image src="../src/assets/emptyOrder.png" style="width: 150px"></el-image>
              <div>暂无进行中的订单</div>
            </div>
            <!-- 订单数据 -->
            <div v-if="orderNotAccepted.length !== 0 || orderAccepted.length !== 0">
              <el-scrollbar height="190px">
                <!-- 待接单的订单 -->
                <el-row v-for="orderItem in orderNotAccepted" class="order-row" @click="gotoOrderDetail(orderItem.id)">
                  <!-- 图像列 -->
                  <el-col :span="4"><el-image class="home-order-image" :src="orderItem.photo" fit="cover" /></el-col>
                  <!-- 信息列 -->
                  <el-col :span="12"><el-row><el-tag type="info">待接单</el-tag></el-row><el-row>下单时间：{{ orderItem.orderTime
                  }}</el-row></el-col>
                  <!-- 操作列 -->
                  <el-col :span="6" style="text-align: right">
                    <el-button type="success" @click="accept(orderItem)">接单</el-button>
                    <el-button type="warning" @click="reject(orderItem)">拒单</el-button>
                  </el-col>
                </el-row>
                <!-- 制作中的订单 -->
                <el-row v-for="orderItem in orderAccepted" class="order-row" @click="gotoOrderDetail(orderItem.id)">
                  <!-- 图像列 -->
                  <el-col :span="4"><el-image class="home-order-image" :src="orderItem.photo" fit="cover" /></el-col>
                  <!-- 信息列 -->
                  <el-col :span="12"><el-row><el-tag type="warning">制作中</el-tag></el-row><el-row>下单时间：{{
                    orderItem.orderTime }}</el-row>
                    <el-row>接单时间：{{ orderItem.orderRectime }}</el-row></el-col>
                  <!-- 操作列 -->
                  <el-col :span="6" style="text-align: right">
                    <el-button type="success" @click="finish(orderItem)">完成</el-button>
                  </el-col></el-row>
              </el-scrollbar>
            </div>
          </el-card>
        </el-col>
        <!-- 排行榜 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="home-o-rank-card" :body-style="{ padding: '8px' }">
              <!-- 卡片标题 -->
              <div class="rank-head">
                <div class="rank-title">
                  <span>销量最</span>
                  <span style="color: #d81e06"><svg t="1700284969270" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="4261" width="20" height="20">
                      <path
                        d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z"
                        p-id="4262" fill="#d81e06"></path>
                    </svg>HOT</span>
                  <span>菜品</span>
                  <el-button text class="rank-button" @click="gotoFood"><el-icon>
                      <ArrowRightBold />
                    </el-icon></el-button>
                </div>
                <!-- 排行选项 -->
                <div class="rank-option">
                  <el-radio-group v-model="rankOption1" @change="changeData">
                    <el-radio-button label="latest" border size="small">近七日</el-radio-button>
                    <el-radio-button label="history" border size="small">历史</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div></div>
              <!-- 排行数据 -->
              <div class="rank-data">
                <el-scrollbar height="90px">
                  <el-row v-for="(rankItem, index) in rankList" class="rank-row" @click="gotoFoodDetail(rankItem)">
                    <el-col :span="2"><span>{{ index + 1 }}</span></el-col><el-col :span="16"><span>{{
                      rankItem.foodName
                    }}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></el-col><el-col :span="3"><svg t="1700284969270"
                        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4261"
                        width="20" height="20">
                        <path
                          d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z"
                          p-id="4262" fill="#d81e06"></path>
                      </svg>{{ rankItem.saleNumber }}</el-col><el-col :span="2"><el-icon style="margin: 8px 0px 0px">
                        <ArrowRight />
                      </el-icon></el-col></el-row>
                </el-scrollbar>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="home-o-rank-card" :body-style="{ padding: '8px' }">
              <!-- 卡片标题 -->
              <div class="rank-head">
                <div class="rank-title">
                  <span>最</span><span style="color: #dd6572">
                    <svg t="1700289665958" class="icon" viewBox="0 0 1088 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="5470" width="20" height="20">
                      <path
                        d="M572.8 160a160 160 0 1 0 0 320 160 160 0 0 0 0-320zM348.8 320a224 224 0 1 1 235.648 223.68v49.024a340.224 340.224 0 0 0-340.224 340.288H168.448A416 416 0 0 1 489.408 528 224.064 224.064 0 0 1 348.736 320z m284.672 486.72l46.464-121.472 45.568 211.392c8.448 39.232 63.808 40.832 74.56 2.176l46.144-166.08 50.304 79.616 9.408 14.912h62.912a32 32 0 1 0 0-64h-27.648l-75.52-119.68a35.2 35.2 0 0 0-63.68 9.408l-35.84 128.64-41.792-194.048c-8.064-37.312-59.776-41.28-73.408-5.632l-69.376 181.312H489.856a32 32 0 0 0 0 64h135.744l7.872-20.48z"
                        fill="#dd6572" fill-opacity=".9" p-id="5471"></path>
                    </svg>活跃</span><span>用户</span>
                </div>
                <!-- 排行选项 -->
                <div class="rank-option">
                  <el-radio-group v-model="rankOption2" @change="changeData2">
                    <el-radio-button label="latest" border size="small">近七日</el-radio-button>
                    <el-radio-button label="history" border size="small">历史</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div></div>
              <!-- 排行数据 -->
              <div class="rank-data">
                <el-scrollbar height="60px">
                  <el-row v-for="(rankItem, index) in rankList2" class="rank-row">
                    <el-col :span="2"><span>{{ index + 1 }}</span></el-col><el-col :span="16"><span>{{
                      rankItem.username
                    }}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></el-col><el-col :span="3"><svg t="1701409775384"
                        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4322"
                        width="20" height="20">
                        <path
                          d="M543.744 648.192q0-30.72-11.776-58.368t-31.744-47.616-47.104-31.744-57.856-11.776-58.368 11.776-47.616 31.744-31.744 47.616-11.776 58.368 11.776 57.856 31.744 47.104 47.616 31.744 58.368 11.776 57.856-11.776 47.104-31.744 31.744-47.104 11.776-57.856zM736.256 851.968q0-22.528-8.704-43.008t-24.064-35.328-35.84-23.552-43.008-8.704q-23.552 0-43.52 8.704t-34.816 23.552-23.552 35.328-8.704 43.008q0 23.552 8.704 43.52t23.552 35.328 34.816 24.064 43.52 8.704q22.528 0 43.008-8.704t35.84-24.064 24.064-35.328 8.704-43.52zM545.792 474.112q-45.056 0-83.968-16.896t-68.096-46.08-46.08-68.096-16.896-82.944 16.896-83.456 46.08-68.096 68.096-45.568 83.968-16.896q44.032 0 82.944 16.896t68.096 45.568 46.08 68.096 16.896 83.456-16.896 82.944-46.08 68.096-68.096 46.08-82.944 16.896zM435.2 164.864q-17.408 0-29.696 12.288t-12.288 29.696 12.288 29.696 29.696 12.288 29.696-12.288 12.288-29.696-12.288-29.696-29.696-12.288z"
                          p-id="4323" fill="#dd6572"></path>
                      </svg>{{ rankItem.orderNum }}</el-col><el-col :span="2"><el-icon style="margin: 7px 10px 0px">
                        <ArrowRight />
                      </el-icon></el-col></el-row>
                </el-scrollbar>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>

      <el-backtop :right="100" :bottom="100" />
    </el-container>
  </el-container>
</template>

<script>
import { tooltipEmits } from "element-plus";

export default {
  data() {
    return {
      isCollapse: false, //是否折叠侧边栏
      date: {
        year: "",
        month: "",
        day: "",
        hour: "",
        minute: "",
        second: "",
      },
      rankOption1: "latest",
      rankOption2: "latest",
      avatarSrc: "",
      username: "",
      orderNumDay: 0,
      orderNumMonth: 0,
      //订单相比昨日
      orderNumDayRate: 0,
      //订单相比上个月
      orderNumMonthRate: 0,
      turnover: 0,
      turnoverRate: 0,
      rankList: [],
      rankList2: [],
      orderList: [],
      orderNotAccepted: [],
      orderAccepted: [],
      account: {},
    };
  },
  created() {
    this.account = JSON.parse(this.$store.state.account);
    this.avatarSrc = "http://localhost:8080" + this.account.avatar;
    this.username = this.account.username;
    this.getRecentHot();
    this.getRecentActivate();
    this.getOrderList();
    this.calculateOrderToday();
    this.calculateOrderMonth();
    this.calculatePriceDay();
    name: "HomeSwiper", this.updateTime();
    setInterval(this.updateTime, 1000); // 更新时间的定时器，每秒更新一次
  },
  methods: {
    // 切换侧边栏的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    updateTime() {
      const now = new Date();
      this.date.year = now.getFullYear();
      this.date.month = now.getMonth() + 1;
      this.date.day = now.getDate();
      this.date.hour = now.getHours();
      this.date.minute = now.getMinutes();
      this.date.second = now.getSeconds();
    },
    changeData() {
      if (this.rankOption1 == "latest") this.getRecentHot();
      else this.getHistoryHot();
      console.log(this.rankOption1);
    }, //食品销量历史最高
    getHistoryHot() {
      let url = "/foods?orderField=saleNumber&&pageSize=5";
      let _this = this;
      this.$http.get(url).then(function (response) {
        console.log(response.data.records);
        _this.rankList = response.data.records;
      });
      //食品销量近7日最高
    },
    getRecentHot() {
      let url = "/foods/recentHot";
      let _this = this;
      this.$http.get(url).then(function (response) {
        _this.rankList = response.data;
      });
    },
    changeData2() {
      if (this.rankOption2 == "latest") this.getRecentActivate();
      else this.getHistoryActive();
      console.log(this.rankOption1);
    }, //历史最活跃用户
    getHistoryActive() {
      let url = "/users/historyActive";
      let _this = this;
      this.$http.get(url).then(function (response) {
        console.log(response.data);
        _this.rankList2 = response.data;
      });
    }, //近7日最活跃用户
    getRecentActivate() {
      let url = "/users/recentActive";
      let _this = this;
      this.$http.get(url).then(function (response) {
        _this.rankList2 = response.data;
      });
    },
    //计算今天的订单总数和订单比昨天的增长率
    calculateOrderToday() {
      let url = "/orders/orderNum/0";
      let _this = this;
      this.$http.get(url).then(function (response) {
        _this.orderNumDay = response.data;
        url = "/orders/orderNum/1";
        let tmpthis = _this;
        _this.$http.get(url).then(function (response) {
          let history = response.data - tmpthis.orderNumDay;
          if (history == 0) {
            tmpthis.orderNumDayRate = 100;
            return;
          }
          let dif = tmpthis.orderNumDay - history;
          let rate = dif / response.data;
          tmpthis.orderNumDayRate = ((rate * 10000) / 100.0).toFixed(2);
        });
      });
    }, //计算这个月的订单总数和订单比上个月的增长率
    calculateOrderMonth() {
      let url = "/orders/orderNum/29";
      let _this = this;
      this.$http.get(url).then(function (response) {
        _this.orderNumMonth = response.data;
        url = "/orders/orderNum/59";
        let tmpthis = _this;
        _this.$http.get(url).then(function (response) {
          let history = response.data - tmpthis.orderNumMonth;
          if (history == 0) {
            tmpthis.orderNumMonthRate = 100;
            return;
          }
          let dif = tmpthis.orderNumMonth - history;
          let rate = dif / response.data;
          tmpthis.orderNumMonthRate = ((rate * 10000) / 100.0).toFixed(2);
          console.log("orderNumMonthRate = ", tmpthis.orderNumMonthRate);
        });
      });
    },
    //计算今天的营业额和与昨天相比的增长率
    calculatePriceDay() {
      let url = "/orders/price/0";
      let _this = this;
      this.$http.get(url).then(function (response) {
        if (response.data != "") {
          _this.turnover = response.data;
        }
        console.log("营业额", response.data);
        url = "/orders/price/1";
        let tmpthis = _this;
        _this.$http.get(url).then(function (response) {
          let history = response.data - tmpthis.turnover;
          if (history == 0) {
            tmpthis.turnoverRate = 100;
            return;
          }
          let dif = tmpthis.turnover - history;
          let rate = dif / response.data;
          tmpthis.turnoverRate = ((rate * 10000) / 100.0).toFixed(2);
        });
      });
    },
    gotoFood() {
      this.$router.push({
        path: "/owner/food",
      });
    },
    gotoFoodDetail(fooditem) {
      this.$router.push({
        path: "/owner/fooddetail",
        state: {
          foodID: fooditem.id,
          lastpage: "/owner/home",
        },
      });
    },
    gotoOrder() {
      this.$router.push({
        path: "/owner/order",
      });
    },
    getOrderList() {
      let _this = this;
      let url = "/orders?userID=" + _this.account.id;
      _this.$http.get(url).then(function (response) {
        _this.orderList = response.data.records;
        for (let i = 0; i < _this.orderList.length; i++) {
          _this.orderList[i].photo = "http://localhost:8080" + _this.orderList[i].photo;
        }
        // 对订单状态分类
        for (let i = 0; i < response.data.records.length; i++) {
          // 待接单的订单
          if (_this.orderList[i].orderRectime === null) {
            _this.orderNotAccepted.push(_this.orderList[i]);
          }
          // 制作中的订单
          else if (_this.orderList[i].orderFinishTime === null&&_this.orderList[i].hasRejected==0) {
            _this.orderAccepted.push(_this.orderList[i]);
          }
        }
      });
    },
    accept(orderEntity) {
      orderEntity.orderRectime = new Date().valueOf();
      let _this = this;
      console.log(orderEntity);
      this.$http.put("/orders/state", orderEntity).then(function (response) {
        _this.$message({
          message: "成功接单！",
          type: "success",
        });
        //将订单加到制作中队列
        const index = _this.orderNotAccepted.findIndex(
          (option) => option.id === orderEntity.id
        );
        _this.orderNotAccepted.splice(index, 1);
        _this.orderAccepted.push(orderEntity);
      });
    },
    reject(orderEntity) {
      orderEntity.hasRejected = 1;
      orderEntity.orderRectime = new Date().valueOf();
      let _this = this;
      console.log(orderEntity);
      this.$http.put("/orders/state", orderEntity).then(function (response) {
        _this.$message({
          message: "成功拒单！",
          type: "success",
        });
        //将订单加到已拒绝队列
        const index = _this.orderNotAccepted.findIndex(
          (option) => option.id === orderEntity.id
        );
        _this.orderNotAccepted.splice(index, 1);
      });
    },
    finish(orderEntity) {
      orderEntity.orderFinishTime = new Date().valueOf();
      console.log(orderEntity);
      let _this = this;
      this.$http.put("/orders/state", orderEntity).then(function (response) {
        _this.$message({
          message: "完成订单！",
          type: "success",
        });
        //将订单加到已完成队列
        const index = _this.orderAccepted.findIndex(
          (option) => option.id === orderEntity.id
        );
        _this.orderAccepted.splice(index, 1);
      });
    },
    gotoOrderDetail(orderID) {
      let _this = this;
      _this.$router.push({
        path: "/owner/orderdetail",
        state: {
          orderID: orderID,
          lastpage: "/owner/home",
        },
      });
    },
  },
};
</script>

<style>
.el-statistic {
  /* 数字 字体大小 */
  --el-statistic-content-font-size: 24px !important;
}

.el-statistic__head {
  font-size: 18px !important;
}

.statistic-card {
  height: 92px;
  padding: 5px 20px 0px;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.statistic-card:hover {
  transform: translateY(-1px);
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3) !important;
}

.statistic-footer {
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin-top: 2px;
  padding-left: 80px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}

.yellow {
  color: var(--el-color-warning);
}

.home-order-card {
  height: 250px;
  border-radius: 15px !important;
  margin-bottom: 10px;
}

.home-o-rank-card {
  height: 200px;
  border-radius: 15px !important;
}
</style>
